/******************** 变量 ********************/
$lv-form-required-icon-space: 0.02rem;

%lv-form-label-required-symbol {
  display: inline;
  order: 2;
  content: '*';
  @extend %lv-form-label-required-base;
}

%lv-form-label-required-base {
  padding-left: $lv-form-required-icon-space;
  color: $status-color-error;
  font-weight: $font-weight-bold;
  font-size: $font-size-base;
}

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-form {
  display: block;
  color: $text-color;
  font-size: $font-size-base;
  font-family: $font-family;
  line-height: $line-height-coeff;
}

.lv-form-column {
  display: inline-block;
  vertical-align: top;
}

/* ---------------lv-form-item --------------- */
.lv-form-item {
  display: table-row;

  > .lv-form-control,
  > .lv-form-label {
    vertical-align: top;
  }

  &:not(:last-of-type) {
    > .lv-form-control,
    > .lv-form-label {
      padding-bottom: $padding-md;
    }
  }
}

.lv-form-vertical {
  .lv-form-item {
    display: flex;
    flex-direction: column;

    &:not(:last-of-type) {
      > .lv-form-label {
        padding-bottom: 0;
      }
    }
  }
}

/* ---------------lv-form-item --------------- */

/* ---------------lv-form-label --------------- */
.lv-form-label {
  display: table-cell;
  min-height: 0.32rem;
  padding-right: $padding-md;
  color: $text-color-secondary;
  white-space: nowrap;
}

.lv-form-label-box {
  display: flex;
  align-items: center;
}

.lv-form-label-required {
  .lv-form-label-box:not(.lv-form-label-tips-box)::before {
    @extend %lv-form-label-required-symbol;
  }
  .lv-form-label-required-base{
    @extend %lv-form-label-required-base;
  }
}

.lv-form-label-required-width-keep:not(.lv-form-label-required) {
  .lv-form-label-box::before {
    @extend %lv-form-label-required-symbol;

    display: none;
  }
}

.lv-form-label-colon {
  .lv-form-label-box::after {
    top: -0.5px; // TODO
    display: inline;
    order: 3;
    margin: 0 0 0 0.02rem;
    content: '\3A';
  }
}

.lv-form-vertical {
  .lv-form-label {
    display: block;
    min-height: auto;
    margin-bottom: $margin-xs;
    padding-right: $padding-md;
    font-size: $font-size-sm;
    line-height: $line-height-sm;
  }

  .lv-form-control {
    line-height: $line-height-base;
  }
}

/* ---------------lv-form-label --------------- */

/* ---------------lv-form-control --------------- */
.lv-form-control {
  position: relative;
  display: table-cell;
}

.lv-form-control-error-default {
  display: flex;
  align-items: flex-start;
  width: 0;
  min-width: 100%;
  font-size: $font-size-sm;
  line-height: $line-height-sm;

  @include motion-form-text;

  i {
    flex: 0 0 auto;
    width: $icon-size-base;
    height: $icon-size-base;
    margin-top: calc(#{$margin-xs} / 2);
    margin-right: $margin-xs;
  }

  i,
  span {
    color: $text-color-error;
    vertical-align: middle;
  }

  span.lv-form-control-error-default-normal {
    color: $text-color-secondary;
  }
}

.lv-form-control-help-tooltip {
  display: table-cell;
  .lv-form-control-error-default {
    width: max-content;
    max-width: max-content;
  }
}

// 表单控件错误样式
.lv-form-control-has-error {
  position: relative;
  *.ng-invalid.ng-touched,
  *.ng-invalid.ng-dirty {
    border-color: $form-border-color-error !important;
  }
}

.lv-form-control-error {
  color: $text-color-error;
  font-size: $font-size-sm;
  line-height: $line-height-sm;
}

.lv-form-vertical {
  .lv-form-control {
    display: block;
  }
}

.lv-form-control-help {
  margin-top: calc(#{$margin-xs} / 2);
  color: $text-color-tertiary;
  font-size: $font-size-sm;
  line-height: $line-height-sm;

  @include motion-form-text;
}

/* ---------------lv-form-control --------------- */

/* ---------------lv-form-default --------------- */
.lv-form {
  .lv-form-control {
    min-height: $height-base;

    .lv-button {
      height: $height-base;
      font-size: $font-size-base;
      line-height: $line-height-base;

      &.lv-button-type-link {
        height: $height-sm;
      }
    }

    .lv-input {
      &:not(textarea, .lv-paginator *, .lv-spinner *) {
        &.lv-input-size-default,
        &.lv-input-size-large {
          height: $height-base;
          line-height: $input-size-default-line-height;
        }
      }
    }

    .lv-input-group {
      &.lv-input-group-default,
      &.lv-input-group-large {
        height: $height-base;
        line-height: $input-size-default-line-height;
      }
    }

    /* -- form只有default和large两种尺寸 -- */
    .lv-select-wrapper:not(.lv-select-wrapper.lv-select-trigger-size-small) {
      min-height: $height-base;
    }

    // datePicker default样式
    .lv-date-picker {
      .lv-date-picker-wrapper {
        height: $height-base;

        .lv-input {
          height: $height-base;
        }
      }
    }

    // time picker default样式
    .lv-time-picker {
      .lv-time-picker-wrapper {
        height: $height-base;

        .lv-input {
          height: $height-base;
        }
      }
    }

    .lv-date-range-picker {
      .lv-date-range-picker-wrapper {
        height: $height-base;

        .lv-input {
          &:not(textarea) {
            &.lv-input-size-default,
            &.lv-input-size-large {
              height: $height-base;
              line-height: $input-size-default-line-height;
            }
          }
        }
      }
    }

    .lv-spinner {
      height: $height-base;

      .lv-spinner-button {
        height: 100%;
      }
    }

    .lv-input-ip {
      height: $height-base;
    }

    .lv-switch-host {
      @include defaultSwitch;
    }

    .lv-fileupload {
      @include defaultFileupload;
    }
  }

  // 表格
  .lv-table > .lv-table-content {
    > .lv-table-body,
    > .lv-table-scroll > .lv-table-body,
    > .lv-table-scroll > .lv-table-body > .cdk-virtual-scroll-content-wrapper {
      > table > .lv-table-tbody > tr.lv-table-row > td {
        height: $height-lg;
      }
    }
  }
}

/* ---------------lv-form-large --------------- */
.lv-form-horizontal.lv-form-large,
.lv-form-vertical.lv-form-large {
  .lv-form-label {
    line-height: $height-lg; // 和输入框大尺寸保持一致
  }

  .lv-form-control {
    min-height: $height-lg;

    .lv-button {
      height: $height-lg;
      font-size: $font-size-lg;
      line-height: $line-height-lg;

      &.lv-button-type-link {
        height: $height-sm;
      }
    }

    .lv-input {
      &:not(textarea, .lv-paginator *, .lv-spinner *) {
        &.lv-input-size-default,
        &.lv-input-size-large {
          height: $height-lg;
          line-height: $input-size-large-line-height;
        }
      }
    }

    .lv-input-group {
      &.lv-input-group-default,
      &.lv-input-group-large {
        height: $height-lg;
        line-height: $input-size-large-line-height;
      }
    }

    /* -- form只有default和large两种尺寸 -- */
    .lv-select-wrapper:not(.lv-select-wrapper.lv-select-trigger-size-small) {
      min-height: $height-lg;
    }

    // datePicker large样式
    .lv-date-picker {
      .lv-date-picker-wrapper {
        height: $date-picker-large-input-height;

        .lv-input {
          height: $date-picker-large-input-height;
        }
        .lv-date-picker-clear {
          height: $height-base;
        }
      }
    }

    .lv-date-range-picker {
      .lv-date-range-picker-wrapper {
        height: $date-picker-large-input-height;

        .lv-date-picker-main {
          .lv-input {
            &:not(textarea) {
              &.lv-input-size-default,
              &.lv-input-size-large {
                height: $height-lg;
                line-height: $input-size-large-line-height;
              }
            }
          }

          &.lv-date-picker-selected-start,
          .lv-date-picker-selected-end {
            &::after {
              top: calc(50% - 0.11rem);
              height: 0.22rem;
            }
          }
        }
      }
    }

    // time picker large样式
    .lv-time-picker {
      .lv-time-picker-wrapper {
        height: $height-lg;

        .lv-input {
          height: $height-lg;
        }
      }
    }

    .lv-spinner {
      height: $height-lg;

      .lv-spinner-button {
        height: 100%;
      }
    }

    .lv-input-ip {
      height: $height-lg;
    }

    // swicth开关 large样式
    .lv-switch-host {
      @include largeSwitch;
    }

    .lv-fileupload {
      @include largeFileupload;
    }
  }

  // 表格
  .lv-table > .lv-table-content {
    > .lv-table-body,
    > .lv-table-scroll > .lv-table-body,
    > .lv-table-scroll > .lv-table-body > .cdk-virtual-scroll-content-wrapper {
      > table > .lv-table-tbody > tr.lv-table-row > td {
        height: $height-xl;
      }
    }
  }
}

.lv-form-vertical.lv-form-large {
  .lv-form-label {
    line-height: $line-height-sm;
  }

  .lv-form-control {
    min-height: $height-lg;
  }
}
